<template>
  <views>
    <div class="enterprise_office_sign_detail1">
      <viewTitle :title="'签约详情'" :border="false"></viewTitle>
      <div class="flex flexR infor_list">
        <!-- 姓名、手机号码、身份证号、合同时间 -->
        <div class="list_item flex flexR center">
          <div class="item_title">姓名:</div>
          <div>
            <el-input v-model="user_name" placeholder :disabled="attestation == 1 || disabled"></el-input>
          </div>
        </div>
        <div class="list_item flex flexR center">
          <div class="item_title">手机号码:</div>
          <div>
            <el-input v-model="phone" placeholder :disabled="disabled"></el-input>
          </div>
        </div>
        <div class="list_item flex flexR center">
          <div class="item_title">身份证号:</div>
          <div>
            <el-input v-model="identity_card" placeholder :disabled="attestation == 1 || disabled"></el-input>
          </div>
        </div>
        <div class="list_item flex flexR center">
          <div class="item_title">合同起始时间:</div>
          <div>
            <el-date-picker
              :disabled="disabled"
              v-model="contract_time"
              :default-time="['0:00:00','23:59:59']"
              type="datetimerange"
              value-format="timestamp"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>
        </div>
      </div>
      <div class="flex flexR infor_list">
        <div class="list_item flex flexR center">
          <div class="item_title">银行卡账号:</div>
          <div class="bank_code">
            <el-input v-model="bank_code" placeholder :disabled="attestation == 1 || disabled"></el-input>
          </div>
        </div>
        
      </div>


      <!-- 是否认证 -->
      <div class="attestation_ flex flexR">
        <div>是否认证:</div>
        <div class="sign_contract_radio">
          <el-radio v-model="attestation" label="0" :disabled=true >未认证</el-radio>
          <el-radio v-model="attestation" label="1" :disabled=true >已认证</el-radio>
        </div>
      </div>

      <!-- 用户来源 -->
      <div class="attestation_ flex flexR">
        <div>用户来源:</div>
        <div class="sign_contract_radio">
          {{pro_come_from}}
        </div>
      </div>

      <div class="img_list" v-if="this.sign_img.length > 0">
        <!-- 个人签名 -->
        <div class="sign_img flex flexR">
          <div>签名图片:</div>
          <div v-if="type==1" class="sign_img_show">
            <el-image
              style="width: 280px;height: 150px;"
              :src="sign_img"
              :preview-src-list="[sign_img]"
            ></el-image>
          </div>
          <div v-if="type==2" class="sign_img_show">
            <el-upload
              class="upload"
              drag
              :action="fileUrl"
              :show-file-list="false"
              :on-success="signImgSuccess"
            >
              <!-- 如果是编辑的话，这里先展示图片 -->
              <img v-if="type == 2 " style="width:100%;height:100%" :src="sign_img" alt />
              <!-- 如果是新增的话，这里显示上传图片按钮 -->
              <i v-if="type == 2 " class="el-icon-upload"></i>
              <div v-if="type == 2 " class="el-upload__text">
                将文件拖到此处，或
                <em>点击上传</em>
              </div>
            </el-upload>
          </div>
        </div>

        <!-- 协议图片 -->
        <!--
        <div class="sign_img flex flexR">
          <div>协议图片:</div>
          <div v-if="type==1" class="sign_img_show">
            <el-image
              style="width: 280px;height: 150px;"
              :src="agreement_pictures"
              :preview-src-list="[agreement_pictures]"
            ></el-image>
          </div>
          <div v-if="type==2" class="sign_img_show">
            <el-upload
              class="upload"
              drag
              :action="fileUrl"
              :show-file-list="false"
              :on-success="certificateImgSuccess"
            >
              <img v-if="type == 2 " style="width:100%;height:100%" :src="agreement_pictures" alt />
              <i v-if="type == 2 " class="el-icon-upload"></i>
              <div v-if="type == 2 " class="el-upload__text">
                将文件拖到此处，或
                <em>点击上传</em>
              </div>
            </el-upload>
          </div>
        </div>
        -->

        <!-- 签约图片 -->
        <!--
        <div class="sign_img1 flex flexR">
          <div>签约图片:</div>
          <div v-if="type==1" class="sign_img_show">
            <el-image
              style="width: 280px;height: 150px;"
              :src="sign_pictures"
              :preview-src-list="[sign_pictures]"
            ></el-image>
          </div>
          <div v-if="type==2" class="sign_img_show">
            <el-upload
              class="upload"
              drag
              :action="fileUrl"
              :show-file-list="false"
              :on-success="certificateImgSuccess1"
            >
              <img v-if="type == 2 " style="width:100%;height:100%" :src="sign_pictures" alt />
              <i v-if="type == 2 " class="el-icon-upload"></i>
              <div v-if="type == 2 " class="el-upload__text">
                将文件拖到此处，或
                <em>点击上传</em>
              </div>
            </el-upload>
          </div>
        </div>
        -->

      </div>
      <!-- 确认按钮 -->
      <div class="submit_btn" v-if="disabled==false">
        <el-button type="primary" @click="contractSave">确认</el-button>

        <el-button type="success" v-if="type == 2 && attestation == 0"  @click="realCert">实名认证</el-button>

      </div>
    </div>
  </views>
</template>



<script>
export default {
  data() {
    return {
      user_name: "", // 姓名
      bank_code: "",    //银行卡号
      phone: "", // 手机号码
      identity_card: "", // 身份证
      contract_time: [], // 合同时间
      disabled: false,
      sign_status: "", // 是否签约
      attestation: "", // 是否认证
      sign_img: "",     //个人签名图片
      agreement_pictures: "", // 协议图片
      sign_pictures: "", // 签约图片
      type: 2, // 1 查看  2 修改
      fileUrl: this.$store.getters.uploadFile,
      enterprise_professional_facilitator_id: "",
      pro_come_from: '',        //来源
    };
  },
  methods: {
    //   上传文件返回
    certificateImgSuccess(data) {
      this.agreement_pictures = data.data.url;
    },
    certificateImgSuccess1(data) {
      this.sign_pictures = data.data.url;
    },
    //个人签名图片
    signImgSuccess(data){
      this.sign_img = data.data.url;
    },
    upload_file() {
      return this.$store.getters.uploadFile;
    },
    getData(enterprise_professional_facilitator_id) {
      let data = this.$api.sendSync(this.$mapapi.e_contractInfo, {
        enterprise_professional_facilitator_id
      });
      if (data.code != 200 && data.code != 501) {
        this.$message.error(data.msg);
        return;
      }
      this.agreement_pictures = data.data.protocol_img || "";
      this.sign_pictures = data.data.contract_img || "";
      this.sign_img = data.data.sign_img || "";
      this.sign_status = data.data.is_contract + "";
      this.attestation = data.data.is_auth + "";
      this.user_name = data.data.name;
      this.phone = data.data.mobile;
      this.bank_code = data.data.bank_code,
      this.identity_card = data.data.cer_code;
      let contract_start_time = parseInt(data.data.contract_start_time) > 0 ? data.data.contract_start_time * 1000 : '';
      let contract_end_time = parseInt(data.data.contract_end_time) > 0 ? data.data.contract_end_time * 1000 : '';
      this.contract_time = contract_start_time ? [contract_start_time, contract_end_time] : [];
      this.pro_come_from = data.data.pro_come_from;
        console.log(this.contract_time);
    },
    // 确定
    contractSave() {
      const show_title = msg => {
        this.$message.error(msg);
      };
      if (!this.enterprise_professional_facilitator_id) {
        show_title("enterprise_professional_facilitator_id  不存在");
        return;
      }
      if (!this.phone) {
        show_title("手机号码不能为空");
        return;
      }
      if (!this.identity_card) {
        show_title("身份证号不能为空");
        return;
      }
      /*
      if (!this.agreement_pictures) {
        show_title("请上传协议图片");
        return;
      }
      if (!this.sign_pictures) {
        show_title("请上传签约图片");
        return;
      }
*/
      let data = this.$api.sendSync(this.$mapapi.e_contractSave, {
        enterprise_professional_facilitator_id: this.enterprise_professional_facilitator_id,
        name: this.user_name,
        mobile: this.phone,
        cer_code: this.identity_card,
        // is_contract: this.sign_status,
        is_auth: this.attestation,
        protocol_img: this.agreement_pictures,
        bank_code: this.bank_code,
        contract_img: this.sign_pictures,
        sign_img: this.sign_img,
        contract_start_time: this.contract_time[0]/1000,
        contract_end_time: this.contract_time[1]/1000
      });
      if (data.code != 200) {
        this.$message.error(data.msg);
        return;
      }
      this.$message.success(data.msg);
      // this.$router.go(-1);

      let that = this;
      setTimeout(function() {
        that.$blackRoute({ path: '/enterprise_office_sign',query:{},that:this});                 // 返回指定路由-删除标题栏
      }, 500);
    },
    realCert(){       //实名认证
      let res = this.$api.sendSync(this.$mapapi.e_checkCert, {
          bankcard : this.bank_code,
          name : this.user_name,
          idcard : this.identity_card
      });
      if(res.code != 200){
        this.$message.error(res.msg);
        return;
      }
      //实名认证成功
      this.$message.success(res.msg);
      this.attestation = '1';
    }


  },
  mounted() {
    this.enterprise_professional_facilitator_id = this.$route.query.enterprise_professional_facilitator_id;
    this.$setRouteTitle();
    this.getData(this.enterprise_professional_facilitator_id);
    this.type = this.$route.query.type || 0;
    this.disabled = this.type == 1 ? true : false;
  },
  created() {}
};
</script>



<style lang="less"  :scope="true" >
.enterprise_office_sign_detail1 {
  background: #ffffff;
  padding-bottom: 30px;
  .infor_list {
    margin: 15px;
    .list_item {
      width: 275px;
      margin-left: 25px;
      .item_title {
        width: 100px;
      }
      .el-date-editor {
        width: 290px;
      }
      .el-input {
        width: 100%;
        input {
          width: 100%;
        }
      }
      .bank_code{
        width: 100%;
        input{
          width: 100%
        }
      }
    }
    .list_item:first-child {
      margin-left: 0;
      width: 240px;
      .item_title {
        width: 80px;
      }
    }
    .list_item:last-child {
      width: 420px;
      .item_title {
        width: 140px;
      }
    }
  }

  .sign_contract {
    margin: 15px;
    height: 55px;
    align-items: center;
    .sign_contract_radio {
      margin-left: 25px;
    }
  }
  .attestation_ {
    margin: 15px;
    height: 55px;
    align-items: center;
    .sign_contract_radio {
      margin-left: 25px;
    }
  }
  .img_list {
    .sign_img {
      height: 200px;
      margin: 15px;
      .sign_img_show {
        margin-left: 15px;
      }
    }

    .sign_img1 {
      height: 200px;
      margin: 35px 15px 15px 15px;
      .sign_img_show {
        margin-left: 15px;
      }
    }
  }
  .submit_btn {
    margin: 30px 0 30px 25px;
  }
}
</style>